<template>
  <div>
    <div
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        border-bottom: 3px solid rgba(0, 0, 0, 0.3);
      "
    >
      <div class="demo-type">
        <el-avatar
          style="width: 150px; height: 150px"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        ></el-avatar>
      </div>
      <div
        style="
          height: 200px;
          font-size: 20px;
          text-align: left;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          margin: 0 20%;
        "
      >
        <span>{{ companyInfo.company_name }}</span>
        <span v-if="companyInfo.director_msg">{{
          companyInfo.director_msg.telephone
        }}</span>
        <span>{{ companyInfo.create_time }}</span>
      </div>
      <div
        style="
          height: 200px;
          font-size: 20px;
          text-align: left;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
        "
      >
        <span><el-tag size="small" type="success">正常</el-tag></span>
        <span style="display: flex; align-items: center"
          ><span>150******00</span></span
        >
        <span style="visibility: hidden">修改</span>
      </div>
    </div>
    <div style="padding: 0 2%">
      <div
        style="
          font-size: 20px;
          display: flex;
          justify-content: space-between;
          margin: 40px 0 30px 0;
        "
      >
        <span>企业信息</span>
        <el-button @click="update" style="font-size: 20px" type="text"
          >修改认证主体
        </el-button>
      </div>
      <div
        style="
          width: 100%;
          background-color: #eee;
          font-size: 18px;
          padding: 0 10%;
        "
      >
        <el-row :gutter="20" style="padding-top: 30px; text-align: left">
          <el-col :span="6"
            ><span>公司简称：{{ companyInfo.company_name }}</span></el-col
          >
          <el-col :span="6">
            <div>
              <span>公司负责人：</span
              ><span v-if="companyInfo.director_msg">{{
                companyInfo.director_msg.name
              }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <span>负责人联系电话：</span
              ><span v-if="companyInfo.director_msg">{{
                companyInfo.director_msg.telephone
              }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <span>负责人邮箱：</span
              ><span v-if="companyInfo.director_msg">{{
                companyInfo.director_msg.email
              }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 30px; text-align: left">
          <el-col :span="6">
            <div>
              <span>公司全称：</span
              ><span v-if="companyInfo.company_msg">{{
                companyInfo.company_msg.name
              }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <span>公司电话：</span
              ><span v-if="companyInfo.company_msg">{{
                companyInfo.company_msg.number
              }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <span>公司地址：</span
              ><span v-if="companyInfo.company_msg">{{
                companyInfo.company_msg.adress
              }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <span>结算类型：</span
              ><span v-if="companyInfo.settlement_type === 'day'">天结</span>
              <span v-else-if="companyInfo.settlement_type === 'week'"
                >周结</span
              >
              <span v-else-if="companyInfo.settlement_type === 'month'"
                >月结</span
              >
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 0; text-align: left">
          <el-col
            :span="6"
            style="display: flex; justify-content: start; align-items: center"
            ><span>营业执照：</span>
<!--            <el-upload-->
<!--              class="avatar-uploader"-->
<!--              action="https://jsonplaceholder.typicode.com/posts/"-->
<!--              :show-file-list="false"-->
<!--            >-->
              <img
                v-if="companyInfo.company_msg"
                :src="baseUrl+companyInfo.company_msg.license"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
<!--            </el-upload>-->
          </el-col>
          <el-col :span="6">
            <div style="height: 105px; text-align: left; line-height: 105px">
              <span>财务负责人：</span
              ><span v-if="companyInfo.finance_msg">{{
                companyInfo.finance_msg.name
              }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="height: 105px; text-align: left; line-height: 105px">
              <span>财务电话：</span
              ><span v-if="companyInfo.finance_msg">{{
                companyInfo.finance_msg.telephone
              }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="height: 105px; text-align: left; line-height: 105px">
              <span>财务邮箱：</span
              ><span v-if="companyInfo.finance_msg">{{
                companyInfo.finance_msg.email
              }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div style="padding: 0 2%">
      <div
        style="
          font-size: 20px;
          display: flex;
          justify-content: space-between;
          margin: 40px 0 30px 0;
        "
      >
        <span>子账号信息</span>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{
          background: '#eee',
          color: '#000',
        }"
      >
        <el-table-column prop="account" label="账号"></el-table-column>
        <el-table-column prop="username" label="姓名"></el-table-column>
        <el-table-column prop="amount" label="余额"></el-table-column>
        <el-table-column prop="shop_title" label="店铺名称">
          <template slot-scope="scope">
            <span>{{scope.row.shops.shop_title}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="shop_type" label="平台">
            <template slot-scope="scope">
             <span>{{scope.row.shops.shop_type}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" >
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status==1">开启</el-tag>
            <el-tag type="danger" v-else>禁用</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <infoModal
      @closeForm="closeDialog"
      @submit="submitForm"
      :dialogVisible.sync="dialogVisible"
      :editData="editData"
      :dialogTitle="dialogTitle"
    ></infoModal>
  </div>
</template>

<script>
import infoModal from "./components/infoModal.vue";
import { getCompanyInfo, updateCompany,getAccount } from "@/api/user";

export default {
  components: {
    infoModal,
  },
  data() {
    return {
      baseUrl:  process.env.NODE_ENV == "development"
          ? "http://membe.e-kc.com/"
          : "https://membe.e-kc.vip/",
      dialogVisible: false,
      editData: {},
      dialogTitle: "",
      tableData: [],
      companyInfo: {},
    };
  },
  mounted() {
    this.getCompanyInfo();
  },
  methods: {
    async getCompanyInfo() {
      const res = await getCompanyInfo();
      if (res.data.status === 200) {
        this.companyInfo = res.data.data;
      }
      const {data} = await getAccount({company_id:this.companyInfo.company_id})
      this.tableData = data.data;
      console.log(this.tableData)
    },
    async submitForm(val) {
      const res = await updateCompany(val);
      if (res.data.status === 200) {
        this.$message({
          type: "success",
          message: res.data.msg,
        });
        this.dialogVisible = false;
        this.getCompanyInfo();
      } else {
        this.$message({
          type: "error",
          message: res.data.msg,
        });
      }
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    update() {
      this.dialogVisible = true;
      this.dialogTitle = "修改信息";
      this.editData = this.companyInfo;
    },
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 150px;
  height: 100px;
  display: block;
}
</style>
